<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>测试</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script>

    var editor, editor2
    var API_DATA = {
      method: 'POST',
      isfile: false,
      url: '',
      baseUrl: '/',
      data: {}
    }
    $(function () {
      editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.session.setMode("ace/mode/javascript");
      editor.getSession().setTabSize(2);

      editor2 = ace.edit("editor2");
      editor2.setTheme("ace/theme/monokai");
      editor2.session.setMode("ace/mode/javascript");
      editor2.getSession().setTabSize(2);
      editor2.setReadOnly(true);
      var data = [
        { value: 'api/login/login', label: 'api/login/login<b>(登录接口)</b>' },
        { value: 'api/login/online', label: 'api/login/online<b>(切换上线状态)</b>' },
        { value: 'api/login/busy', label: 'api/login/busy<b>(切换忙碌状态)</b>' },
        { value: 'api/login/outline', label: 'api/login/outline<b>(切换离线状态)</b>' },
        { value: 'api/user/getuser', label: 'api/user/getuser<b>(从微信获取用户)</b>' },
        { value: 'api/user/getsqluser', label: 'api/user/getsqluser<b>(从服务器获取用户)</b>' },
        { value: 'api/user/getchatlog', label: 'api/user/getchatlog<b>(获取聊天记录)</b>' },
        { value: 'api/user/textmsg', label: 'api/user/textmsg<b>(发送文本消息)</b>' },
        { value: 'api/user/imgmsg', label: 'api/user/imgmsg<b>(发送图片消息)</b>' },
        { value: 'api/user/getpushmsg', label: 'api/user/getpushmsg<b>(获取需要推送的消息)</b>' },
        { value: 'api/label/getlabel', label: 'api/label/getlabel<b>(获取全部分组)</b>' },
        { value: 'api/label/creategroup', label: 'api/label/creategroup<b>(创建父级分组)</b>' },
        { value: 'api/label/createlabel', label: 'api/label/createlabel<b>(创建标签)</b>' },
        { value: 'api/label/updatelabel', label: 'api/label/updatelabel<b>(编辑标签)</b>' },
        { value: 'api/user/setusertags', label: 'api/user/setusertags<b>(设置用户标签)</b>' },
        { value: 'api/user/delusertags', label: 'api/user/delusertags<b>(删除用户标签)</b>' },
        { value: 'api/csuser/saveusermsg', label: 'api/csuser/saveusermsg<b>(保存用户额外信息)</b>' },
        { value: 'api/csuser/movecsuser', label: 'api/csuser/movecsuser<b>(转接客服)</b>' },
        { value: 'api/csuser/savereply', label: 'api/csuser/savereply<b>(设置自动回复图片)</b>' },
        { value: 'api/csuser/getreply', label: 'api/csuser/getreply<b>(获取自动回复)</b>' },
        { value: 'api/csuser/getcsuser', label: 'api/csuser/getcsuser<b>(获取客服信息)</b>' },
        { value: 'api/csuser/getallcsuser', label: 'api/csuser/getallcsuser<b>(获取全部客服)</b>' },
        { value: 'api/csuser/outlinemsg', label: 'api/csuser/outlinemsg<b>(客服发送离线消息)</b>' },
        { value: 'api/csuser/savebespeak', label: 'api/csuser/savebespeak<b>(文本预约消息)</b>' },
        { value: 'api/csuser/bespeaklist', label: 'api/csuser/bespeaklist<b>(获取客服的预约)</b>' },
      ];
      $('.API_url').autocompleter({ source: data });
      $('.set_api_method').click(function () {
        API_DATA.method = $(this).attr('method')
        $('.show_api_method').html($(this).attr('method') + '<span class="caret"></span>')
      })
      $('#sendApi').click(function () {
        API_DATA.url = $('.API_url').val()
        try {
          var data = JSON.parse(editor.getValue())
        } catch (err) {
          console.log('填写正确的JSON格式');
          var data = {};
        }
        API_DATA.data = data
        sendUrl(API_DATA)
      });


      $('#exampleInputFile').change(function () {
        console.log(this.files[0]);
        API_DATA.isfile = true
        API_DATA.file = this.files[0]
      });
    })


    function sendUrl(option) {
      
      // $.post('https://wechat.shangning.site/api/User/sengMsgForUser',API_DATA.data,function (res) {
      //   editor2.setValue(JSON.stringify(res, null, 2));
      // });
      // return ;
      if (API_DATA.method == 'POST') {
        if (!API_DATA.isfile) {
          $.post(API_DATA.baseUrl + API_DATA.url, API_DATA.data, function (res) {
            editor2.setValue(JSON.stringify(res, null, 2));
          })
        } else {
          var formData = new FormData();
          formData.append("token","kshdfiwi3rh");
          for (var i in  API_DATA.data) {
            formData.append(i, API_DATA.data[i])
          }
          formData.append('image', API_DATA.file)
          $.ajax({
            url: API_DATA.baseUrl + API_DATA.url,
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (res) {
               editor2.setValue(JSON.stringify(res, null, 2));
            }
          });
        }

      } else {
        $.get(API_DATA.baseUrl + API_DATA.url, API_DATA.data, function (res) {
          editor2.setValue(JSON.stringify(res, null, 2));
        })
      }
    }
  </script>
  <style>
    .autocompleter {
      width: 100%;
      background: #ddd;
      position: absolute;
      top: 34.29px;
      left: 0;
      z-index: 100
    }

    .autocompleter,.autocompleter-hint {
      position: absolute
    }

    .autocompleter-list {
      box-shadow: inset 0 0 6px rgba(0,0,0,.1);
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: left;
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }
    .autocompleter-list li b{
      font-weight: 400;display: inline-block;padding-left: 5px;color:#999;
    }

    .autocompleter-item-selected {
      background: #fff
    }
    .ace_scroller{
      right:5px!important;
    }
    .ace_scrollbar{
      width:5px!important;
    }
    .ace_scrollbar::-webkit-scrollbar{margin-right:2px;width:5px}
    .ace_scrollbar::-webkit-scrollbar-track-piece{
      background:rgba(255,255,255,0.5);border-radius: 5px;
    }
    .ace_scrollbar::-webkit-scrollbar-thumb{
      border-radius: 5px;cursor: pointer;background:#f8edc5;
    }
    .ace_scrollbar::-webkit-scrollbar-thumb:hover{
      background:red;
    }
    .autocompleter-item {
      padding: 6px 12px;
      color: #333;
      font-size: 14px;
      cursor: pointer
    }

    .autocompleter-item:hover {
      background:#b6b6b6
    }

    .autocompleter-item strong {
      background: #f9de8f;
      text-shadow: 0 1px 0 #fff;
    }

    .autocompleter-item span {
      color: #bbb
    }

    .autocompleter-hint {
      color: #ccc;
      text-align: left;
      top: -56px;
      font-weight: 400;
      left: 0;
      width: 100%;
      padding: 12px 12px 12px 13px;
      font-size: 24px;
      display: none
    }

    .autocompleter-hint span {
      color: transparent
    }

    .autocompleter-hint-show {
      display: block
    }

    .autocompleter-closed {
      display: none
    }
    #sendApi{
      outline: none;
    }
    .container_box .btn{
      padding: 6px 12px 7px;
    }
    #editor { 
        width:100%;height:300px;border-radius: 5px;margin-bottom: 10px;font-size: 16px;border:1px solid #272822;
        border-width: 1px 0;
    }
    #editor2 { 
        width:100%;height:300px;border-radius: 5px;margin:0;font-size: 16px;border:1px solid #272822;
        border-width: 1px 0;
    }
    .API_url_box{
      padding:0;border:0;
    }
    .API_url_box .API_url{
      /* border:0; */border-radius: 0;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Api 测试</a>
      </div>
    </div>
  </nav>

  <div class="container container_box">
    <label for="basic-url">API路径</label>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon3">http://127.0.0.1:8360/</span>
      <div class="form-control API_url_box">
          <input type="text" class="form-control API_url" id="basic-url" aria-describedby="basic-addon3">
      </div>
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle show_api_method" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">POST<span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li class="set_api_method" method="POST"><a href="#">POST</a></li>
          <li class="set_api_method" method="GET"><a href="#">GET</a></li>
        </ul>
      </div>
    </div><br>
    <div class="form-group">
      <label for="exampleInputFile">文件</label>
      <input type="file" id="exampleInputFile">
    </div>
    <label for="basic-url">请求参数</label>
    <div id="editor">{
  "username":"zi02",
  "pwd":"123456",
  "type":"1002",
  "adminLogin":false,
  "mobileLogin":false
}</div>
    <button id="sendApi" type="button" class="btn btn-primary btn-lg btn-block">发送请求</button>
    <br>
    <label for="basic-url">返回值</label>
    <div id="editor2"></div>
  </div>
  <script src="/static/js/ace-builds-master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/jquery.autocompleter.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>